<template>
    <div>
        <div class="header">
            <van-icon name="arrow-left" @click="$router.go(-1)" />
            <van-icon name="apps-o" @click="show=true" />
            <span>产品详情</span>
        </div>
        <!-- 商品内容 -->
        <div>

            <!-- 商品内容详情 左侧面板 -->
            <van-popup v-model="show" position="left" :style="{ height: '100%',width:'30%' }">
                <div>
                    <van-sidebar v-model="activeKeyLeft" @change="onChange">
                        <van-sidebar-item :title="item.name" v-for="item in orderDetailList" :key="item.id" />
                    </van-sidebar>
                </div>
            </van-popup>
            <!-- 右侧内容区域 -->
            <div>
                <div class="RightImg">
                    <img v-if="orderDetailList" :src="photo">
                </div>
                <div class="orderTitle">{{name}}</div>
                <!-- 活动区域 -->
                <div class="active">
                    <span>活动</span>
                    <div style="background-color: rgb(248,43,123);color: #fff;width: 35px;height: 45px; text-align:center">充返</div>
                    <span>充500送25，充1000送100...充10000送2000</span>
                    <span style="position: relative;top: 2px;left: 3px;">></span>
                </div>
                <!-- 服务介绍 -->
                <div>
                    <div class="Introduce">
                        <div class="serviceIntroduce">服务介绍</div>
                        <div class="detailIntroduce">{{description}}</div>
                    </div>
                    <div class="Introduce">
                        <div class="serviceIntroduce">取消订单说明</div>
                        <div class="detailIntroduce">1.订单服务开始0-2小时取消，扣除订单金额的30%作为空单费并补偿阿姨
                            <br>
                            <br>
                            2.若是由于您的服务原因服务人员无法入户，服务人员到达服务地址或在服务地址等待一小时后将自行离开，将扣除订单金额的50%作为空单费补偿阿姨
                        </div>
                    </div>
                    <div class="Introduce">
                        <div class="serviceIntroduce">服务特色</div>
                        <div class="detailIntroduce">1.专业的家政服务平台
                            <br>
                            <br>
                            2.经过专业培训的服务人员
                        </div>
                    </div>
                    <div class="Introduce">
                        <div class="serviceIntroduce">注意事项</div>
                        <div class="detailIntroduce">1.预约时间范围：08:00-19:00，<span
                                style="color:rgb(247,106,23)">至少提前24小时预约</span>
                            <br>
                            <br>
                            2.电话/微信客服的工作时间：09:00-18:00
                            <br>
                            <br>
                            3.客服电话：400-8888-1234
                        </div>
                    </div>
                </div>
                <!-- 预约按钮 -->
                <div>
                    <div class="subOrder" @click="submitOrder">立即下单</div>
                </div>
            </div>
            <!-- 占据 -->
            <div style="height: 160px;"></div>
        </div>
    </div>
</template>
<script>
    import {
        get
    } from '@/http/axios'
    export default {
        data() {
            return {
                // 产品id
                productCategoryId: '',
                // 订单详细数据
                orderDetailList: [],
                // 左侧面板展示
                show: false,
                // 左侧点击侧边栏标记
                activeKeyLeft: 0,
                // 接收传递过来的参数
                activeKey: 0,
                photo: '',
                name: '',
                description: ''
            }
        },
        created() {
            this.productCategoryId = this.$route.query.categortId
            this.activeKey = this.$route.query.activeKey
            this.getDetailFindById().then(res => {
                this.photo = res[this.activeKeyLeft].photo
                this.name = res[this.activeKeyLeft].name
                this.description = res[this.activeKeyLeft].description

            })
        },
        // watch: {
        //     activeKeyLeft: (newVal, oldVal) => {
        //         this.getDetailFindById().then(res => {
        //             this.photo = res[newVal].photo
        //             this.name = res[newVal].name
        //             this.description = res[newVal].description
        //         })
        //     }
        // },
        methods: {
            onChange(index) {
                this.activeKeyLeft = index
                this.getDetailFindById().then(res => {
                    this.photo = res[this.activeKeyLeft].photo
                    this.name = res[this.activeKeyLeft].name
                    this.description = res[this.activeKeyLeft].description
                })
            },
            async getDetailFindById() {
                let data = {
                    page: 1,
                    pageSize: 10,
                    productCategoryId: this.productCategoryId
                }
                let res = await get('/product/pageQuery', data)
                this.orderDetailList = res.data.data.list
                return this.orderDetailList
            },
            // 跳转到对应的链接
            submitOrder() {
                // 使用编程式导航进行跳转
                this.$router.push({
                    // 路径
                    path: '/manager/product',
                    // 参数的传递
                    query: {
                        categortId: this.productCategoryId,
                        activeKey: this.activeKey
                    }
                })
            }
        },
    }
</script>
<style scoped>
    .header {
        background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
        width: 100%;
        height: 46px;
        text-align: center;
        line-height: 46px;
        color: #fff;
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 2px
    }

    .van-icon {
        position: relative;
        left: -120px;
        top: 5px;
    }

    .van-sidebar {
        width: 100%;
    }

    .RightImg {
        width: 100%;
        height: 180px;
    }

    .RightImg img {
        width: 100%;
        height: 100%;
    }

    .orderTitle {
        width: 100%;
        height: 20px;
        padding: 10px;
    }

    .active {
        display: flex;
        padding: 10px;
        box-sizing: border-box;
        color: #666;
        border-top: 1px solid #ccc;
        border-bottom: 0.5px solid #ccc;
    }

    .Introduce {

        border-radius: 10px 10px 0 0;
        margin-top: 20px;
        border: 1px solid #ccc;
    }

    .serviceIntroduce {
        padding: 10px;
        background-color: rgb(240, 240, 240);
    }

    .detailIntroduce {
        padding: 10px;
        color: #666;
    }

    .subOrder {
        height: 40px;
        background-color: #faaca8;
        color: #fff;
        text-align: center;
        line-height: 40px;
        position: fixed;
        bottom: 51px;
        width: 100%;
    }
</style>